<template>
  <div class="editor">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="协议名称" prop="title">
        <el-input v-model="form.title" placeholder="协议名称" clearable style="width:800px" />
      </el-form-item>
      <div>
        <el-form-item label="售后电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" maxlength="11" style="width:220px" type="tel" placeholder="售后电话" clearable />
        </el-form-item>
        <el-form-item label="投诉电话" prop="complaints">
          <el-input v-model="form.complaints" maxlength="11" style="width:220px" type="tel" placeholder="投诉电话" clearable />
        </el-form-item>
      </div>
    </el-form>
    <div class="title">协议内容</div>
    <div class="editor_content">
      <Editor :value="form.content" @geteditor="geteditor" />
    </div>
    <div class="button">
      <el-button size="small" @click="$router.go(-1)">
        返 回
      </el-button>
      <el-button type="primary" size="small" @click="submit()">
        发 布
      </el-button>
    </div>
  </div>
</template>
<script>
import { add, update, queryId } from '@/api/agreements'
import Editor from '@/components/wangEnduit.vue'
export default {
  components: {
    Editor
  },
  data() {
    return {
      form: {
        id: '',
        title: '',
        content: '',
        contactPhone: '',
        complaints: ''
      },
      title: '新增',
      rules: {
        title: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        contactPhone: [{ required: true, message: '请输入售后电话', trigger: 'blur' }],
        complaints: [{ required: true, message: '请输入投诉电话', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      queryId({ id: id }).then(res => {
        for (const key in this.form) {
          this.form[key] = res.data[key]
          this.title = '修改'
        }
      })
    }
  },
  methods: {
    geteditor(data) {
      this.form.content = data
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            update(this.form).then(res => {
              if (res.code * 1 === 200) {
                this.$message({
                  message: `${this.title}成功`,
                  type: 'success',
                  showClose: true
                })
                this.$router.replace({ name: 'agreements' })
              }
            })
            return
          }
          add(this.form).then(res => {
            if (res.code * 1 === 200) {
              this.$message({
                message: `${this.title}成功`,
                type: 'success',
                showClose: true
              })
              this.$router.replace({ name: 'agreements' })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  padding: 20px 0 15px 0;
}
.pages {
  padding: 20px;
}
.editor {
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 50px);
  padding: 32px;
  background: #fafafa;
}
.editor_content {
  min-height: 400px;
  background: #ffffff;
}
.button {
  padding-top: 20px;
  text-align: right;
}
</style>

